<template>
  <div class="add-courseware">
    <div class="courseware-title">
      <h2>新增课件</h2>
      <p class="title-desc">
        新增课件请先输入课件名称及选择年纪，然后点击添加题目按钮，为当前课件增加题目。
      </p>
      <div class="title-courseware">
        <div class="title-left">课件名称：</div>
        <div class="title-right">
          <el-input
            v-model="coursewareName"
            placeholder="请输入课件名称"
            clearable
          ></el-input>
        </div>
      </div>
      <div class="title-courseware title-add">
        <div class="f-flex"></div>
        <div class="f-btn f-btn-blue" @click="addTopic" v-if="isAddBtn">
          + 添加题目
        </div>
      </div>
    </div>
    <div class="courseware-wrapper">
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AddCourseware",

  data() {
    return {
      // 是否显示添加题目按钮
      isAddBtn: true,
      // 课件名称
      coursewareName: "",
      // 题目列表数据
      evalList: [],
    };
  },

  created() {},

  methods: {
    // 添加题目
    addTopic() {
      this.isAddBtn = false;
    },
  },
};
</script>

<style lang="less" scoped>
.add-courseware {
  // 标题区域
  .courseware-title {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    // 页面标题
    h2 {
      margin-bottom: 25px;
      font-size: 30px;
      font-weight: normal;
    }
    // 标题描述
    .title-desc {
      font-size: @t5;
      color: @gray4-color;
      letter-spacing: 1px;
    }
    // 课件名称区域
    .title-courseware {
      width: 55%;
      margin-top: 50px;
      display: flex;
      align-items: center;
      // justify-content: center;
      .title-left {
        font-size: @t5;
      }
      .title-right {
        flex: 1;
      }
    }
    // 添加课件
    .title-add {
      margin-top: 20px;
      .f-btn {
        width: 150px;
        height: 38px;
        // text-align: left;
        letter-spacing: 1px;
      }
    }
  }
}
</style>